<template>
		<view>
			<slot></slot>
			<view class="mask" v-if="visible">
				<view class="picker-date">
					<view class="button">
						<view @click="changeVisible(true)">取消</view>
						<text style="color: #394954;">{{ title }}</text>
						<view @click="confirm" :class="disable ? '' : 'disable'" style='color:#457AFF '>确认</view>
					</view>
					<picker-view indicator-style="height: 50px; line-height: 50px;" :value="value" @change="bindChange" class="picker-view">
						<picker-view-column>
						    <view class="item" v-for="(item,index) in infoList" :key="index">{{item.label}}</view>
						</picker-view-column>
					</picker-view>
				</view>
			</view>
		</view>

</template>
<script>
    export default {
		name: 'XbdSelectTwo',
		props: {
			visible: {
				type: Boolean,
				required: true
			},
			infoList: {
				type: Array,
				required: []
			},
			title: {
				type: String,
				default: ''
			}
		},
        data: function () {
            return {
				flag:false,
				disable: true,
                value: [],
				oldValue:[],
            }
        },

        methods: {
            bindChange (e) {
				this.value = e.detail.value;
            },
			changeVisible(str) {
				if (str) {
					this.value = this.oldValue;
				} else {
					this.oldValue = this.value;
				}
				this.$emit('update:visible', !this.visible);
			},
			// 确认
			confirm() {
				if (this.disable) {
					this.changeVisible(false);
					this.$emit('update:carId', this.infoList[this.value].label);
					this.$emit('update:option', this.infoList[this.value].option);
					
				}
			},
        }
		
    }
</script>
<style lang="scss">
	.disable {
		color: #999988;
	}
	.mask {
		position: fixed;
		top: 0;
		bottom: 0;
		width: 100% !important;
		height: 100% !important;
		left: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.4);
		
		z-index: 9999;
	}
	.picker-date {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 600rpx;
		background-color: #FFFFFF;
	}
	.button {
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		padding: 0 50rpx;
		height: 80rpx;
		
		font-size: 32rpx;
		color: $uni-text-color;
		background-color: #F8F8F8;
		
		box-sizing: border-box;
		:nth-child(2) {
			color: $uni-color-primary;
		}
	}
	.picker-view {
	    width: 750rpx;
	    height: 520rpx;
	}
	.item {
	    height: 50px;
		line-height: 50px;
	    align-items: center;
		color: #000000;
	    justify-content: center;
	    text-align: center;
	}
</style>